<template>
  <div class="containe">
    <div class="button-container">
      <el-button type="primary"  @click="dialogVisible = true">添加书籍</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="bookName"
        label="书名">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="synopsis"
        label="简介">
      </el-table-column>
      <el-table-column
        prop="bookNumber"
        label="借读次数">
      </el-table-column>
    </el-table>

    <el-dialog title="添加书籍" :visible.sync="dialogVisible">
      <div>
        <el-form :label-position="labelPosition" label-width="80px" >
          <el-form-item label="书名">
            <el-input v-model="form.bookName"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="form.author"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="form.synopsis"></el-input>
          </el-form-item>
          <el-form-item label="借读次数">
            <el-input v-model="form.bookNumber"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBook ">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style lang="scss">
.containe {
  padding: 20px;
  background-color: #fff;
  height: 95%;
  
  .button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    
    .el-button {
      padding: 10px 20px;
    }
  }
  
  .el-table {
    margin-top: 0;
    
    .el-table__header-wrapper {
      height: 60px; 
      line-height: 60px;
      font-size: 20px;
      
      th.el-table__cell {
        padding: 4px 0;  
      }
    }
    
    .el-table-column {
      line-height: 1.4;  
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      form: {
        bookName: '',
        author: '',
        synopsis: '',
        bookNumber: ''
      }
    }
    
  },
  created() {
    this.getBookList()
  },
  methods: {
    getBookList() {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "http://localhost:3000/api/books");
      xhr.setRequestHeader("Content-Type", "application/json");
      
      xhr.onload = () => {
        if (xhr.status === 200) {
          try {
            const response = JSON.parse(xhr.responseText);         
            if (response.success) {
              this.tableData = response.data; 
            } else {
              this.$message.error(response.message);
            }
          } catch (e) {
            console.error('JSON解析失败:', e);
          }
        } else {
          console.error('请求失败:', xhr.statusText);
        }
      };
  
      xhr.onerror = () => {
        console.error('请求错误');
      };
      
      xhr.send(JSON.stringify({}));
    },

    addBook() {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "http://localhost:3000/api/books/add");
      xhr.setRequestHeader("Content-Type", "application/json");

      xhr.onload = () => {
        if (xhr.status === 200) {
          try {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
              this.$message.success('添加成功');
              this.dialogVisible = false;
              this.getBookList(); 
              this.form = {
                bookName: '',
                author: '',
                synopsis: '',
                bookNumber: ''
              };
            } else {
              this.$message.error(response.message || '添加失败');
            }
          } catch (e) {
            console.error('JSON解析失败:', e);
            this.$message.error('服务器返回数据异常');
          }
        } else {
          console.error('请求失败:', xhr.statusText);
          this.$message.error('网络请求失败');
        }
      };

      xhr.onerror = () => {
        console.error('请求错误');
        this.$message.error('网络请求错误');
      };

      xhr.send(JSON.stringify({
        bookName: this.form.bookName,
        author: this.form.author,
        synopsis: this.form.synopsis,
        bookNumber: this.form.bookNumber
      }));
    }
    }
}
</script>